import { filterDifficulty, gradeObject } from "@/constants/index";
import { Button, Input, Radio, Space, Table, Tag } from "antd";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";

const { Search } = Input;

interface Question {
    id: string;
    subjectName: string;
    subjectDifficult: number;
    labelName: string[];
}

interface QuestionListProps {
    total?: number;
    isShowSearch?: boolean;
    isHideSelect?: boolean;
    questionList: Question[];
    changeDifficuty: (difficulty: number) => void;
    setSearchStr: (value: string) => void;
}

const colors = [
    "#ffffb8",
    "#f4ffb8",
    "#b5f5ec",
    "#bae0ff",
    "#d9f7be",
    "#efdbff",
    "#ffd6e7",
    "#d6e4ff",
];

const QuestionList: React.FC<QuestionListProps> = (props) => {
    const [difficuty, setDifficuty] = useState<number>(0);
    const navigate = useNavigate();

    const RandomNumBoth = (Min: number, Max: number): number => {
        const Range = Max - Min;
        const Rand = Math.random();
        return Min + Math.round(Rand * Range);
    };

    const handleSearch = (close: () => void) => {
        props.changeDifficuty(difficuty);
        close();
    };

    const changeDifficuty = (e: any) => {
        setDifficuty(e.target.value);
    };

    const questionColumns = [
        {
            title: (
                <div style={{ display: "flex" }}>
                    题目{" "}
                    <div
                        className="question-count-box"
                        style={{
                            marginLeft: "10px",
                            color: "rgba(0, 0, 0, 0.5)",
                        }}
                    >
                        （当前
                        <span style={{ color: "rgba(0, 0, 0, 0.65)" }}>
                            {" "}
                            {props.total || 0}{" "}
                        </span>
                        道题）
                    </div>
                </div>
            ),
            key: "questionNo",
            align: "center" as const,
            render: (_: any, record: Question) => {
                return (
                    <div className="question-info-container">
                        <div className="question-info-desc">
                            {record.subjectName}
                        </div>
                        <div className="question-info-tags">
                            {record?.labelName?.length > 0 &&
                                record.labelName.map((tagsItem) => {
                                    return (
                                        <div
                                            className="question-info-tag"
                                            key={tagsItem}
                                            style={{
                                                backgroundColor:
                                                    colors[RandomNumBoth(0, 7)],
                                            }}
                                        >
                                            {tagsItem}
                                        </div>
                                    );
                                })}
                        </div>
                    </div>
                );
            },
        },
        {
            title: "难度",
            dataIndex: "subjectDifficult",
            key: "subjectDifficult",
            align: "center" as const,
            filterDropdown: ({ close }: { close: () => void }) => (
                <div
                    style={{ padding: 16 }}
                    onKeyDown={(e) => e.stopPropagation()}
                >
                    <div
                        style={{
                            textAlign: "center",
                            fontSize: "16px",
                            fontWeight: "bold",
                            marginBottom: 10,
                        }}
                    >
                        请选择
                    </div>
                    <Radio.Group
                        style={{ width: "100%", textAlign: "center" }}
                        value={difficuty}
                        onChange={changeDifficuty}
                    >
                        <Space direction="vertical">
                            {filterDifficulty.map((item) => {
                                return (
                                    <Radio value={item.id} key={item.id}>
                                        {item.title}
                                    </Radio>
                                );
                            })}
                        </Space>
                    </Radio.Group>

                    <Button
                        block
                        size="small"
                        type="primary"
                        style={{ marginTop: 12 }}
                        onClick={() => handleSearch(close)}
                    >
                        确定
                    </Button>
                </div>
            ),
            width: 90,
            render: (key: number) => {
                return (
                    <Tag color={gradeObject?.[key]?.color}>
                        {gradeObject?.[key]?.title}
                    </Tag>
                );
            },
        },
    ];

    const onChangeAction = (item: Question) => () => {
        window.open("/brush-question/" + item.id, "_blank");
    };

    const renderFilterContainer = () => {
        const { isShowSearch, setSearchStr } = props;
        return (
            <div className="question-filter-container">
                {isShowSearch && (
                    <Search
                        placeholder="请输入感兴趣的内容～"
                        onSearch={(value) => setSearchStr(value)}
                        style={{ width: 240 }}
                        allowClear
                        size="small"
                    />
                )}
            </div>
        );
    };

    const { questionList, isHideSelect } = props;

    return (
        <div className="question-list-filter">
            {!isHideSelect && renderFilterContainer()}
            <div className="question-list-container">
                <Table
                    onRow={(record: Question) => {
                        return {
                            onClick: onChangeAction(record),
                        };
                    }}
                    columns={questionColumns}
                    dataSource={questionList}
                    rowKey="id"
                    pagination={false}
                    rowClassName="question-table-row"
                />
            </div>
        </div>
    );
};

export default QuestionList;
